<template>
  <div class="visitor-container flex justify-between">
    <div class="set-left mg-right-20 h-100P">
      <!-- 产线信息 -->
      <div class="set-left-t w-100P mg-bottom-20 radius-10 pd-20">
        <span class="set-title">产线信息</span>
        <ul class="set-left-ul">
          <li>车间编号:<span >{{lineGetData.numbering}}</span></li>
          <li>产线编号:<span >{{lineGetData.productionLineNumber}}</span></li>
          <li>产线名称:<span >{{lineGetData.productionLineName}}</span></li>
          <li>产品名称:<span >{{lineGetData.productManageNames}}</span></li>
        </ul>
      </div>
      <!-- 产线预览 -->
      <div class="set-left-b w-100P mg-bottom-20 radius-10 pd-20 h-100P flex">
        <span class="set-title">产线预览</span>
        <div class="productionLinePre-box w-100P mg-top-10">
          <ul class="productionLinePre-ul w-100P flex">
            <li v-for="(item,index) in productionLineData" :key="index">
              <div class="circle-o">
                <div :class="{'circle-i':true, active:item.state}"><span></span></div>
              </div>
              <span>{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 环节配置 -->
    <div class="set-right h-100P">

      <el-form ref="linkForm" :model="linkForm" :rules="rules" label-width="80px" class="h-100P">
        <div class="set-right-t radius-10 pd-20">
          <span class="set-title align-center mg-bottom-20">环节配置</span>
          <el-row>
            <el-col :span="12">
              <span class="set-title-s align-start mg-bottom-20">产线流程</span>
            </el-col>
            <el-col :span="11" align="right">
              <!-- 添加一行 -->
              <el-tooltip class="item" effect="dark" content="添加环节" placement="top">
                <el-button  @click="addConditions" ><span style="color:#1890FF">+</span>加一行</el-button>
              </el-tooltip>
            </el-col>
          </el-row>

          <!-- 产线流程 -->
          <div class="set-right-ct">
            <div v-for="(item,index) in productionLineData" :key="index">

              <el-row id="item.id">
                <el-col :span="1" align="right">
                  <i class="el-icon-connection" style='font-size:20px;color:#1890FF'></i>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="环节名称" prop="linkname">
                    <el-input v-model="item.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2" :offset="1">
                  <el-form-item label="监测设备">
                    <el-tooltip class="item" effect="dark" content="选择监测设备" placement="top">
                      <!-- <el-checkbox v-model="item.state">监测设备</el-checkbox> -->
                      <el-switch v-model="item.state" active-color="#87CEFA" inactive-color="#D8BFD8" active-value="1" inactive-value="0"></el-switch>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item>
                    <el-cascader style="width:90%" medium v-if="item.state == 1"
                    :show-all-levels="false" clearable
                    v-model="item.orange" placeholder="监测设备选择"
                    :options="equimentAllList" filterable></el-cascader>
                  </el-form-item>
                </el-col>
                <!-- v-model="item.iotDeviceId" placeholder="监测设备选择" -->

                <el-col :span="1">
                    <!-- 删除按钮 -->
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <el-button @click="delConditions(item.id, index)" style='border:none;background:none;padding:0px;margin-top:4px;'>
                        <i class="el-icon-error" style='font-size:20px;'></i>删除
                      </el-button>
                    </el-tooltip>
                </el-col>
                <br>
                <!-- {{item}} -->
              </el-row>
            </div>
          </div>
          <!-- 设备选择备用双框 -->
          <!-- <el-select v-model="item.iotDeviceTypeId" filterable placeholder="请选择设备类型" v-show="item.state" clearable >
            <el-option v-for="item in equimentTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="item.iotDeviceName" filterable placeholder="请选择设备名称" v-show="item.state" clearable >
            <el-option v-for="item in equimentAllList" :key="item.id" :label="item.iotDeviceName" :value="item.id"></el-option>
          </el-select> -->
          <span class="set-title-s align-start mg-bottom-20">产线监测</span>
          <div class="set-right-c flex">
            <!-- 产线仪表 、产线监控 -->
            <div class="set-right-cbl">
              <el-form-item label="产线仪表" class="h-100P">
                <ul>
                  <li v-for="(item,index) in metertData" :key="index">
                    <el-row>
                      <el-col :span="5">
                        <span>{{item.equipmentFunction | lineNames}}
                          <el-switch v-model="item.state" active-color="#87CEFA" inactive-color="#D8BFD8" active-value="1" inactive-value="0"></el-switch>
                        </span>
                      </el-col>
                      <el-col :span="18">
                        <el-form-item  label="监测设备" v-show="item.state =='1'">
                          <el-select @change="getName(item)" v-model="item.equipmentId" placeholder="请选择">
                            <el-option v-for="item in equipmentAllList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
              </el-form-item>
              <div>
                <span class="set-title-s">产线监控&emsp;</span>
                <el-button type="info" icon="el-icon-search" @click="dialogVisible = true">选择监控</el-button>
                <br><br><span v-if="this.equipmentNamesList" style="margin-left:4em;">已选择:&nbsp;{{equipmentNamesList}}</span>
              </div>
            </div>

            <!-- 环境监测 -->
            <div class="set-right-cbl h-100P ">
              <el-form-item label="环境监测">
                <ul>
                  <li v-for="(item,index) in environmentData" :key="index">
                    <el-row>
                      <el-col :span="6">
                        <span>{{item.equipmentFunction | lineNames}}
                          <el-switch v-model="item.state" active-color="#87CEFA" inactive-color="#D8BFD8" active-value="1" inactive-value="0"></el-switch>
                        </span>
                      </el-col>
                      <el-col :span="17">
                        <el-form-item  label="监测设备" v-show="item.state =='1'">
                          <el-select @change="getName(item)" v-model="item.equipmentId" placeholder="请选择">
                            <el-option v-for="item in equipmentAllList" :key="item.value"  :label="item.label" :value="item.value"> </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </li>
                </ul>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- 保存 -->
        <div class="set-right-b pd-20">
          <el-button type="primary" @click="onSubmit('linkForm')">保存</el-button>
          <el-button type="primary" @click="backPage()">取消</el-button>
          <!-- <el-button type="primary" @click="getList()">刷新</el-button> -->
        </div>
      </el-form>
    </div>

    <!-- 右3-产线监控弹窗 -->
    <el-dialog title="选择监控" :visible.sync="dialogVisible" width="70%" @opened="openedDia()">

      <!-- 搜索 -->
      <div class="flex-row justify-between">
        <div class="searchBox">
          <el-form inline :model="queryInfo" class="demo-form-inline">
            <el-form-item label="设备编号">
              <el-input v-model="queryInfo.name" placeholder="请输入类型名称" />
            </el-form-item>
            <el-form-item label="设备名称">
              <el-input v-model="queryInfo.name" placeholder="请输入类型名称" />
            </el-form-item>
            <el-form-item label="设备IP">
              <el-input v-model="queryInfo.ip" placeholder="请输入类型名称" />
            </el-form-item>
           </el-form>
        </div>
        <div class="mg-top-4" style="flex-shrink: 0;">
          <el-button type="info" size="mini" @click="handleQuery">查询</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table v-loading="listLoading" ref="multipleTable"
        :data="tableData" border header-cell-class-name="table-header-cell" 
        header-row-class-name="table-header-row" class="table-container"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="code" label="设备编号" />
        <el-table-column prop="equipmentTypeName" label="设备类型" />
        <el-table-column prop="name" label="设备名称" />
        <el-table-column prop="model" label="规格型号" />
        <el-table-column prop="algorithmNames" label="关联算法" />
        <el-table-column prop="positioning" label="设备定位" />
        <el-table-column prop="mapId" label="所属地图" />
        <el-table-column prop="productionLineId" label="所属产线区域" />
        <el-table-column label="启动/禁用" >
          <template slot-scope="scope">
            <span>{{ scope.row.switchState | reSwitch }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="scope">
            <span>{{ scope.row.state | reStatus }}</span>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <el-pagination background  :total="total" :page-sizes="[2, 4, 6, 8]" :page-size="paging.pageSize" :current-page="currentPage" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />

      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
      <div style="margin-top: 20px">
        <span>已选择:&nbsp;{{equipmentNamesList}}</span>
        <!-- {{this.equipmentIdsList}} -->
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { statusList, switchList, nameList } from '../equipmentmanage/consts'
import {
  findEquipmentListByLineId,
  updateProductionLineMonitor,
  ProductionProcessSave,
  findEquipmentPageByParam,
  findProductionLineMonitorByLineId,
  delEquipmentTypeById,
  findEquipmentTypePageByParam,
  ProductionProcessRemove,
  findProductionProcessByLineId,
  findProductionLineById,
  findWorkshopArchivesPageByParam
} from '@/child-business/api/IndustrialVision' 
export default {
  name: 'Prolinesetpage',
  data() {
    return {
      isChecked: true,
      unChecked: false,
      eventId: '',
      line: [
        { water: true }
      ],
      waterSel: '',
      checkedids: [], // 已经选中的选项
      workshoplist: [],
      dialogtit: '新增',
      listLoading: true,
      currentPage: 1, // 默认当前页
      dialogVisible: false,
      paging: {
        pageNo: 1,
        pageSize: 12
      },
      pagingMoreSearch: {
        id:'',
        name:'',
        ip:'',
      },
      queryBase: {
        numbering: '',
        name: ''
      },
      total: 0,
      tableData: [],
      lineGetData: {
        productionLineNumber: '', //产线编号
        productionLineName: '', //产线名称
        numbering:'', //车间编号
        name: '',// 车间名称
        productManageNames:'' //产品名称
      },
      productionLineData:[],
      rules: {
        name: [{ required: true, message: '请选输入环节名称', trigger: 'blur' }]
      },
      form:{
        name:'',
        delivery: true
      },
      value:'',
      equimentTypeList: [],
      equimentAllList: [],
      metertData:[], //产线仪表
      environmentData:[], //环境监测
      equipmentPosData:[], //产线监控
      equipmentPosList: [], //产线监控已选择
      equipmentAllList:[], // 产品列表
      equipmentIdsList:[], // 弹窗选取id数组
      equipmentNamesList: '',
      // 弹窗用到的数据
      queryInfo: {
        code: '',
        ip: '',
        name: '',
      },
      meterEmptyList: [
        {equipmentFunction:0,state:0},
        {equipmentFunction:1,state:0},
        {equipmentFunction:2,state:0},
        {equipmentFunction:3,state:0},
        {equipmentFunction:4,state:0},
      ],
      environmentEmptyList: [
        {equipmentFunction:5,state:0},
        {equipmentFunction:6,state:0},
        {equipmentFunction:7,state:0},
        {equipmentFunction:8,state:0},
      ],
      linkForm:{},
    }
  },
  filters: {
    reStatus(val){ // 状态
      const item = statusList.find(element => parseInt(element.id) === parseInt(val))
      const name = item ? item.name : ''
      // const name = item.name
      return name
    },
    reSwitch(val){ // 启用还是禁用
      const item = switchList.find(element => parseInt(element.id) === parseInt(val))
      const name = item ? item.name : ''
      return name
    },
    lineNames(val){ // 产线名称
      const item = nameList.find(element => parseInt(element.id) === parseInt(val))
      const name = item ? item.name : ''
      return name
    }
  },
  computed: {},
  created() {
    this.getList()
    this.getworkshoplist()
    this.getEquimentList()
    this.getfindEquipmentPageByParam()
    // 产线ID查产线监控 (产线监测)
    this.getfindProductionLineMonitorByLineId()
  },
  updated () {},
  methods: {
    //获取车间列表
    getworkshoplist() {
      findWorkshopArchivesPageByParam({ workshopArchivesVO: { name: '', numbering: ''}, pageNo: 1, pageSize: 10000}).then(response => {
        this.workshoplist = response.records
      })
    },
    // 获取产品列表
    getList() {
      // 左上产线信息加载 （产线信息）
      this.getFindProductionLineById()
      // 产线配置（环节配置）
      this.getfindProductionProcessByLineId()
      // 产线ID查产线监控 (产线监测)
      this.getfindProductionLineMonitorByLineId()
      // 弹窗数据，设备表
      this.getTableList()
    },


    // 左侧产线信息
    getFindProductionLineById() {
      findProductionLineById({ productionLineId: this.$route.query.id }).then(response => {
        this.lineGetData.productManageNames = response.productManageNames
        this.lineGetData.productionLineNumber = response.productionLineNumber
        this.lineGetData.productionLineName = response.productionLineName
        this.lineGetData.numbering = this.$route.query.numbering
        this.lineGetData.name = this.$route.query.name
      })
    },
    //条件设立中添加一行
    addConditions () {
      this.productionLineData.push({
        'name':'',
        'id':'',
        'iotDeviceTypeId':'',
        'iotDeviceId':'',
      })
    },
    // 删除
    delConditions(id,index) {
      if(!id) {
        this.productionLineData.splice(index,1)
      }else{
        // console.log(id)
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ProductionProcessRemove({ id: id }).then(response => {
            if (response) {
              this.$message({ message: '删除成功！', type: 'success' })
            } else {
              this.$message({ message: '删除失败！', type: 'error' })
            }
            this.getList()
            this.getfindProductionProcessByLineId()
          })
        }).catch(() => { })
      }
    },
    // 按id查询产线配置(环节配置)
    getfindProductionProcessByLineId() {
      findProductionProcessByLineId({ lineId: this.$route.query.id }).then(response => {
        // this.productionLineData = response.productionProcess
        response.productionProcess.forEach((item,index) => {
          if(item.orange) {
            item.orange = item.orange.split(',')
          }
        })
        this.productionLineData = response.productionProcess
      })
    },
    // 通过产线Id 查询产线监测列表
    getfindProductionLineMonitorByLineId() {
      findProductionLineMonitorByLineId({ ProductionLineId: this.$route.query.id }).then(response => {
        //产线仪表
        // this.metertData = this.meterEmptyList
        if(response.meter != null){
          this.metertData = response.meter
        }else {
          this.metertData = this.meterEmptyList
        }
        // console.log('List',this.metertData)
        //环境监测
        // this.environmentData = response.environment
        if(response.environment != null){
          this.environmentData = response.environment
        }else {
          this.environmentData = this.environmentEmptyList
        }
        //产线监控
        // this.equipmentPosData = response.equipmentPos
        this.equipmentIdsList = response.environment[0].monitoringEquipmentId.split(',')
        this.equipmentNamesList = ''
        response.equipmentPos.forEach((item) => {
          this.equipmentNamesList += item.name + ' / ';
        })
      })
    },
    // 获取设备类型
    getEquimentList() {
      const find = {
        equipmentTypeVO: {
          name: ''
        },
        pageNo: 0,
        pageSize: 9999
      }
      findEquipmentTypePageByParam(find).then(response => {
        this.equimentTypeList = response.records
        // console.log('equimentTypeList', response)
        response.records.forEach((item,index) => {
          // 按类型分别获取设备列表
          delEquipmentTypeById({ EquipmentTypeId: item.id}).then(response => {
            const childrenData = []
            response.forEach((item)=>{
              childrenData.push({value:item.id,label:item.name})
            })
            const line = { value:item.id,label:item.name,children: childrenData}
            this.equimentAllList.push(line)
          })
          // console.log(this.equimentAllList)
        })
      })
    },
    // findEquipmentPageByParam 查询条件分页查询设备列表
    getfindEquipmentPageByParam() {
      findEquipmentPageByParam({equipmentVO: {},pageNo: 0,pageSize: 999}).then(response => {
        const linData = []
        response.records.forEach((item) => {
          linData.push({value:item.id,label:item.name,equipmentName:item.name,code:item.code})
        })
        this.equipmentAllList = linData
        // console.log(linData)
      })
    },
    // 回到前一页
    backPage() {
      this.$router.push({ 
        path: '/IndustryBackstage/prolineset'
      })
    },

    // 获取产品列表(弹窗数据)
    getTableList() {
      this.listLoading = true
      // this.openedDia()
      // findEquipmentPageByParam({ equipmentVO: this.queryInfo, ...this.paging}).then(response => {
      findEquipmentListByLineId({ equipmentVO: {productionLineId: this.$route.query.id}, ...this.paging}).then(response => {
        this.total = response.total
        this.tableData = response.records
        // console.log('tableData',this.tableData)
        this.paging.pageNo = response.pageNo
        this.paging.pageSize = response.pageSize
        this.listLoading = false
      })
    },
    // 获取产品列表--查询
    handleQuery() {
      this.paging.pageNo = 1
      this.getTableList()
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.paging.pageNo = val
      this.getTableList()
    },
    //重置
    reset() {
      this.paging.pageNo = 1
      this.queryInfo = {
        algorithm_id: '',
        dataStatusName: '',
        equipment_type_id: '',
        map_id: '',
        model: '',
        name: '',
        production_line_id: '',
        state: '',
        switchState: ''
      }
      // this.getList() ??
    },
    // 弹窗表格钩选
    handleSelectionChange (val) {
      const lineIds = []
      let nameList = ''
      val.forEach((item)=>{
        lineIds.push(item.id)
        nameList += item.name + ' / ';
      })
      this.equipmentIdsList = lineIds
      this.equipmentNamesList = nameList
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // dialog打开时候，选中table中的已选项
    openedDia(){
      if (this.equipmentIdsList.length > 0) {
        this.equipmentIdsList.forEach(row => {
          this.tableData.forEach((el, index) => {
            if(row === el.id){
              this.$refs.multipleTable.toggleRowSelection(this.tableData[index], true)
            }
          })
        })
      }
    },
    // 提交--环节配置信息（保存、新增）
    onSubmit (formName) {
      const DataList = [] // 产线流程提交数据
      const JClist = [] // 产线监测

      // 产线流程(环节)
      this.productionLineData.forEach((item, index) => {
        if(item.orange) {
          DataList.push({
            name:item.name,
            id:item.id,
            state:item.state,
            sort: index,
            productionLineId: this.$route.query.id,
            orange: item.orange.join(','),
            iotDeviceId: item.orange[1],
            iotDeviceTypeId: item.orange[0]
          })
        }else {
          DataList.push({
            name:item.name,
            id:item.id,
            state:item.state,
            sort: index,
            productionLineId: this.$route.query.id,
            orange: '',
          })
        }
      })
      // 产线仪表和环境监测ID添加
      this.metertData.forEach((item) => {
        console.log(item,'item')
        JClist.push({equipmentFunction:item.equipmentFunction, id:item.id, equipmentId: item.equipmentId, equipmentName: item.equipmentName, code: item.code,
        state:item.state, monitoringEquipmentId: this.equipmentIdsList.join(','), productionLineId:this.$route.query.id})
      })
      this.environmentData.forEach((item) => {
        JClist.push({equipmentFunction:item.equipmentFunction, id:item.id, equipmentId: item.equipmentId, equipmentName: item.equipmentName, code: item.code,
        state:item.state, monitoringEquipmentId: this.equipmentIdsList.join(','), productionLineId:this.$route.query.id})
      })
      // console.log('JClist',JClist)
      // console.log('Datttt',this.metertData,this.environmentData)
      // const idList = [{meter: meterList}, {environment: environmentList}, {equipmentPos: this.equipmentIdsList}]
      this.$refs[formName].validate((valid) => {
        // console.log(DataList)
        if (valid) {
          // 产线提交
          ProductionProcessSave(DataList).then(response => {
            if (response) {
              this.dialogFormVisibleAdd = false
              this.$message({ message: '修改成功！', type: 'success' })
            }else{
              this.$message({ message: '修改失败！', type: 'error' })
            }
          })
          // 修改产线检测
          updateProductionLineMonitor(JClist).then(response => {
            if (response) {
              this.dialogFormVisibleAdd = false
              this.$message({ message: '修改成功！', type: 'success' })
            }else{
              this.$message({ message: '修改失败！', type: 'error' })
            }
          })
        }else {
          return false
        }
      })
    },
    getName(tag) {
      var ret = this.equipmentAllList.find((item,index,arr)=>{
        return item.value === tag.equipmentId
      })
      tag.equipmentName = ret.label
      tag.code = ret.code
    },
  }
}
</script>
<style lang="scss" scoped>
 @import '@/child-business/styles/IndustrialVision.scss';
 .el-checkbox{ 
   display: flex; justify-content: flex-start; width:33%;float:left; margin: vh(3px) 0; padding: 0 vw(7px);
  .el-checkbox__inner{margin-top:2px;}
 }
 .addForm{
  margin-left: 30px;
  .el-input{ width: 320px;}
  .el-select{ width: 320px;}
}
.show-top{
  .show-top-l{width: 55%; background: #ddd;}
  
  .show-top-r{width: 45%;}
}
::v-deep .el-dialog__body{padding: 30px 20px 0}
.set-left{
  width: 30%;
  box-sizing: border-box;
}
.set-left-t{
  height: 40%;
  border: 1px solid #444;
}
.set-left-b{
  height: 40%;
  border: 1px solid #444;
  flex-direction: column;
}
.set-right{
  width: 70%;
  height: 100%;
}
.set-right-t{
  border: 1px solid #444;
  height: 90%;
}
.set-right-t > .el-form-item{
  margin-bottom: vw(5px);
}
.set-right-b{
  height: 10%;
}
.set-left-ul{
  list-style: none;
  padding: 0;
  margin: vh(20px) vw(20px);
  line-height: 3em;
}
.set-left-ul li span{
  float: right;
  margin-right: vw(20px);
}
.set-title{
  font-size: vw(22px);
  font-weight: bolder;
}
.set-title-s{
  font-size: vw(16px);
  font-weight: bold;
}
.set-right-cbl{
  height: 100%;
  width: 50%;
}
.set-right-cbl ul{
  list-style: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
}
.productionLinePre-box{
  // overflow-y: scroll;
  overflow-y: auto;
  height: 30%;
  height: auto;
  flex:1;
}
.productionLinePre-ul{
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.productionLinePre-ul li{
  width: 19%;
  min-height: 80px;
  padding: vw(5px);
  text-align: center;
  position: relative;
}
.productionLinePre-ul li span{
  font-size: 12px;
  display: inline-block;
  max-width: 8em;
  overflow: hidden;
  word-wrap: break-word;
}

.circle-o{
  width: vw(48px);
  height: vw(48px);
  border-radius: 50%;
  border: vw(1px) solid #444;
  margin: 0 auto;
}
.circle-i{
  width: vw(28px);
  height: vw(28px);
  border-radius: 50%;
  border: vw(1px) solid #444;
  margin: 0 auto;
  margin-top: vw(9px);

}
.circle-i.active{
  border-color: #1890FF;
}
.circle-i::before{
  content: "";
  position: absolute;
  width: vw(20px);
  height: vw(1px);
  background: #444;
  display: inline-block;
  left: vw(-3px);
  top: vw(30px);
}
.circle-i::after{
  content: "";
  position: absolute;
  width: vw(20px);
  height: vw(1px);
  background: #444;
  display: inline-block;
  right: vw(-3px);
  top: vw(30px);
}
.productionLinePre-ul li:nth-child(1) .circle-i::before{
 background: transparent;
}
.productionLinePre-ul li:nth-last-child(1) .circle-i::after{
 background: transparent;
}
// .productionLinePre-ul li:nth-child(10n-5) .circle-i::after{
//   width: vw(1px);
//   height: vw(20px);
//   left: vw(42px);
//   top: vw(72px);
// }
// .productionLinePre-ul li:nth-child(10n+1) .circle-i::before{
//   width: vw(1px);
//   height: vw(20px);
//   left: vw(42px);
//   top: vw(72px);
// }
// .productionLinePre-ul li:nth-child(5n) .circle-i::after{
//   width: vw(1px);
//   height: vw(20px);
//   left: vw(42px);
//   top: vw(2px);
// }

// 环节配置样式
.set-right-ct{
  list-style: none;
  padding: 0;
  margin: 0;
  height: 35%;
  overflow-y: scroll;
  line-height: 40px;
}

</style>
